<template>
  <div class="server-monitor-container">
    <el-card class="server-card">
      <template #header>
        <div class="card-header">
          <div>
            <span class="header-title">服务器监控</span>
            <span class="header-subtitle">实时监控服务器CPU、内存、磁盘、网络等资源</span>
          </div>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="getServerInfo">
              <i class="el-icon-refresh"></i> 刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="server-info">
            <div class="server-info-item">
              <span class="server-info-label">服务器名称</span>
              <span class="server-info-value">{{ server.computerName }}</span>
            </div>
            <div class="server-info-item">
              <span class="server-info-label">操作系统</span>
              <span class="server-info-value">{{ server.osName }}</span>
            </div>
            <div class="server-info-item">
              <span class="server-info-label">系统架构</span>
              <span class="server-info-value">{{ server.osArch }}</span>
            </div>
            <div class="server-info-item">
              <span class="server-info-label">服务器IP</span>
              <span class="server-info-value">{{ server.computerIp }}</span>
            </div>
            <div class="server-info-item">
              <span class="server-info-label">运行时长</span>
              <span class="server-info-value">{{ server.uptime }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="resource-card-header">
                <span>CPU使用率</span>
                <div class="resource-usage">
                  <el-progress 
                    type="dashboard" 
                    :percentage="parseFloat(cpu.usage)" 
                    :color="getProgressColor(parseFloat(cpu.usage))"
                    :stroke-width="8"
                  />
                </div>
              </div>
            </template>
            <div class="resource-info">
              <div class="resource-info-item">
                <span class="resource-info-label">核心数</span>
                <span class="resource-info-value">{{ cpu.cpuNum }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">用户使用率</span>
                <span class="resource-info-value">{{ cpu.used }}%</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">系统使用率</span>
                <span class="resource-info-value">{{ cpu.sys }}%</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">当前空闲率</span>
                <span class="resource-info-value">{{ cpu.free }}%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="resource-card-header">
                <span>内存使用率</span>
                <div class="resource-usage">
                  <el-progress 
                    type="dashboard" 
                    :percentage="parseFloat(mem.usage)" 
                    :color="getProgressColor(parseFloat(mem.usage))"
                    :stroke-width="8"
                  />
                </div>
              </div>
            </template>
            <div class="resource-info">
              <div class="resource-info-item">
                <span class="resource-info-label">总内存</span>
                <span class="resource-info-value">{{ mem.total }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">已用内存</span>
                <span class="resource-info-value">{{ mem.used }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">剩余内存</span>
                <span class="resource-info-value">{{ mem.free }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">使用率</span>
                <span class="resource-info-value">{{ mem.usage }}%</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt20">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>服务器磁盘状态</span>
              </div>
            </template>
            <el-table :data="sysFiles" style="width: 100%">
              <el-table-column prop="dirName" label="盘符路径" />
              <el-table-column prop="sysTypeName" label="文件系统" width="100" />
              <el-table-column prop="typeName" label="盘符类型" width="100" />
              <el-table-column prop="total" label="总大小" width="100" />
              <el-table-column prop="free" label="可用大小" width="100" />
              <el-table-column prop="used" label="已用大小" width="100" />
              <el-table-column label="已用百分比" width="180">
                <template #default="scope">
                  <el-progress 
                    :percentage="parseFloat(scope.row.usage)" 
                    :color="getProgressColor(parseFloat(scope.row.usage))"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mt20">
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>JVM信息</span>
              </div>
            </template>
            <div class="resource-info">
              <div class="resource-info-item">
                <span class="resource-info-label">JVM名称</span>
                <span class="resource-info-value">{{ jvm.name }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">JVM版本</span>
                <span class="resource-info-value">{{ jvm.version }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">启动时间</span>
                <span class="resource-info-value">{{ jvm.startTime }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">运行时长</span>
                <span class="resource-info-value">{{ jvm.runTime }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">安装路径</span>
                <span class="resource-info-value">{{ jvm.home }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">项目路径</span>
                <span class="resource-info-value">{{ jvm.userDir }}</span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">内存信息</span>
                <span class="resource-info-value">
                  最大内存: {{ jvm.max }} / 已用内存: {{ jvm.used }} / 剩余内存: {{ jvm.free }}
                </span>
              </div>
              <div class="resource-info-item">
                <span class="resource-info-label">内存使用率</span>
                <span class="resource-info-value">
                  <el-progress 
                    :percentage="parseFloat(jvm.usage)" 
                    :color="getProgressColor(parseFloat(jvm.usage))"
                  />
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="box-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>网络状态</span>
              </div>
            </template>
            <div class="network-stats">
              <div class="network-card">
                <div class="network-title">
                  <i class="el-icon-download"></i> 接收
                </div>
                <div class="network-value">{{ network.rxTotal }}</div>
                <div class="network-rate">{{ network.rxRate }}/s</div>
              </div>
              <div class="network-card">
                <div class="network-title">
                  <i class="el-icon-upload"></i> 发送
                </div>
                <div class="network-value">{{ network.txTotal }}</div>
                <div class="network-rate">{{ network.txRate }}/s</div>
              </div>
            </div>
            <div class="network-chart">
              <div id="networkChart" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
// import * as echarts from 'echarts'

// 服务器基本信息
const server = reactive({
  computerName: 'GYXX-SERVER',
  osName: 'CentOS Linux 8.4.2105',
  osArch: 'x86_64',
  computerIp: '192.168.1.100',
  uptime: '10天12小时30分钟'
})

// CPU相关信息
const cpu = reactive({
  cpuNum: 8,
  total: 100,
  sys: 12.5,
  used: 27.8,
  wait: 0.1,
  free: 59.6,
  usage: '40.4'
})

// 内存相关信息
const mem = reactive({
  total: '16 GB',
  used: '7.6 GB',
  free: '8.4 GB',
  usage: '47.5'
})

// JVM相关信息
const jvm = reactive({
  name: 'OpenJDK 64-Bit Server VM',
  version: '11.0.11+9-LTS',
  startTime: '2023-06-01 08:30:00',
  runTime: '4天16小时12分钟',
  home: '/usr/lib/jvm/java-11-openjdk',
  userDir: '/opt/gyxx',
  max: '2048 MB',
  total: '2048 MB',
  used: '1024 MB',
  free: '1024 MB',
  usage: '50.0'
})

// 磁盘相关信息
const sysFiles = ref([
  {
    dirName: '/',
    sysTypeName: 'ext4',
    typeName: '本地磁盘',
    total: '500 GB',
    free: '350 GB',
    used: '150 GB',
    usage: '30'
  },
  {
    dirName: '/boot',
    sysTypeName: 'ext4',
    typeName: '本地磁盘',
    total: '1 GB',
    free: '0.8 GB',
    used: '0.2 GB',
    usage: '20'
  },
  {
    dirName: '/home',
    sysTypeName: 'ext4',
    typeName: '本地磁盘',
    total: '200 GB',
    free: '120 GB',
    used: '80 GB',
    usage: '40'
  },
  {
    dirName: '/var',
    sysTypeName: 'ext4',
    typeName: '本地磁盘',
    total: '100 GB',
    free: '45 GB',
    used: '55 GB',
    usage: '55'
  }
])

// 网络相关信息
const network = reactive({
  rxTotal: '1.2 GB',
  rxRate: '2.5 MB',
  txTotal: '0.8 GB',
  txRate: '1.8 MB'
})

// 定时器
let timer = null
// 图表实例
let networkChartInstance = null

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage < 50) {
    return '#67C23A'
  } else if (percentage < 80) {
    return '#E6A23C'
  } else {
    return '#F56C6C'
  }
}

// 获取服务器信息
const getServerInfo = () => {
  // 模拟获取服务器信息
  ElMessage.success('服务器信息刷新成功')
  
  // 模拟数据变化
  cpu.used = (30 + Math.random() * 20).toFixed(1)
  cpu.sys = (10 + Math.random() * 10).toFixed(1)
  cpu.free = (100 - cpu.used - cpu.sys).toFixed(1)
  cpu.usage = cpu.used
  
  const memUsage = (40 + Math.random() * 20).toFixed(1)
  mem.usage = memUsage
  mem.used = (parseFloat(memUsage) * 16 / 100).toFixed(1) + ' GB'
  mem.free = (16 - parseFloat(mem.used)).toFixed(1) + ' GB'
  
  network.rxRate = (1 + Math.random() * 3).toFixed(1) + ' MB'
  network.txRate = (0.5 + Math.random() * 2).toFixed(1) + ' MB'
  
  // 更新网络图表
  updateNetworkChart()
}

// 初始化网络图表
const initNetworkChart = () => {
  // 此处应该使用echarts初始化图表
  // 由于环境限制，这里只是模拟
  console.log('网络图表初始化')
}

// 更新网络图表
const updateNetworkChart = () => {
  // 此处应该更新echarts图表数据
  // 由于环境限制，这里只是模拟
  console.log('网络图表更新')
}

onMounted(() => {
  // 初始化网络图表
  initNetworkChart()
  
  // 定时刷新数据
  timer = setInterval(() => {
    getServerInfo()
  }, 30000)
})

onUnmounted(() => {
  // 清除定时器
  if (timer) {
    clearInterval(timer)
  }
  
  // 销毁图表实例
  if (networkChartInstance) {
    networkChartInstance.dispose()
  }
})
</script>

<style scoped>
.server-monitor-container {
  padding: 20px;
}

.server-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.header-subtitle {
  font-size: 13px;
  color: #909399;
}

.mt20 {
  margin-top: 20px;
}

.server-info {
  display: flex;
  flex-wrap: wrap;
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
}

.server-info-item {
  width: 33.33%;
  margin-bottom: 10px;
  display: flex;
}

.server-info-label {
  font-weight: bold;
  color: #606266;
  margin-right: 10px;
  min-width: 100px;
}

.server-info-value {
  color: #303133;
}

.resource-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resource-usage {
  width: 120px;
  height: 120px;
}

.resource-info {
  padding: 10px 0;
}

.resource-info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.resource-info-label {
  font-weight: bold;
  color: #606266;
  margin-right: 10px;
  min-width: 100px;
}

.resource-info-value {
  color: #303133;
  flex: 1;
}

.network-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.network-card {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  width: 45%;
}

.network-title {
  color: #606266;
  margin-bottom: 10px;
  font-size: 14px;
}

.network-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.network-rate {
  color: #909399;
  font-size: 14px;
}

.network-chart {
  height: 300px;
  margin-top: 20px;
}
</style> 